<template>
  <div class="app-container">
    <div class="filter-container">
      <template>
        <el-row :gutter="24">
          <el-col :span="4">
            <el-input
              v-model="listQuery.phone"
              placeholder="请输入手机号查询"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="plus" @click="getList"
              >查询
            </el-button>
          </el-col>
          <el-col :span="15">
            <label>&#12288;</label>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="plus" @click="onAddAdminClick"
              >新增管理员
            </el-button>
          </el-col>
        </el-row>
      </template>
    </div>
    <el-table
      style="margin-top: 10px"
      :data="list"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"> </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="手机号"
        prop="phone"
        style="width: 60px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="注册时间"
        prop="createTime"
        style="width: 60px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="更新时间"
        prop="updateTime"
        style="width: 60px"
      ></el-table-column>
      <el-table-column align="center" label="管理" width="220">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enableStatus"
            @change="onEnableClick(scope.$index)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
          <el-button
            type="danger"
            icon="delete"
            v-if="scope.row.userId !== userId"
            @click="removeUser(scope.$index)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 5px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum"
      :page-size="listQuery.pageRow"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        class="small-space"
        :model="createAdmin"
        label-position="left"
        label-width="80px"
        style="width: 350px; margin-left: 50px"
      >
        <el-form-item label="手机号" required>
          <el-input
            type="text"
            placeholder="请输入11位手机号"
            v-model="createAdmin.phone"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input
            type="text"
            maxlength="8"
            minlength="6"
            placeholder="密码长度为6-8位字母或数字"
            v-model="createAdmin.password"
            show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" required>
          <el-input
            type="text"
            maxlength="8"
            minlength="6"
            placeholder="密码长度为6-8位字母或数字"
            v-model="createAdmin.password2"
            show-password
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onCeateAdminClick">创 建</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      totalCount: 0, //分页组件--数据总条数
      list: [], //表格的数据
      listLoading: false, //数据加载等待动画
      listQuery: {
        pageNum: 1, //页码
        pageRow: 10, //每页条数
        phone: "",
        memberType: 2,
      },
      roles: [], //角色列表
      dialogStatus: "create",
      dialogFormVisible: false,
      textMap: {
        update: "编辑",
        create: "新增管理员",
      },
      tempUser: {
        phone: "",
        username: "",
        password: "",
        nickname: "",
        roleIds: [],
        userId: "",
        expirationTime: "",
      },
      createAdmin: {
        phone: "",
        password: "",
        password2: "",
      },
      value: "",
      expiredTypeValue: "0",
    };
  },
  created() {
    this.getList();
    if (this.hasPerm("user:add") || this.hasPerm("user:update")) {
      this.getAllRoles();
    }
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  methods: {
    getAllRoles() {
      this.api({
        url: "/user/getAllRoles",
        method: "get",
      }).then((data) => {
        this.roles = data.list;
      });
    },
    getList() {
      //查询列表
      this.listLoading = true;
      this.listQuery.expiredType = this.expiredTypeValue;
      this.api({
        url: "/wx/user/users",
        method: "get",
        params: this.listQuery,
      }).then((data) => {
        this.listLoading = false;
        this.list = data.list;
        this.totalCount = data.totalCount;
        this.list.forEach((item) => {
          if (item.enable == 1) {
            item.enableStatus = true;
          } else {
            item.enableStatus = false;
          }
        });
      });
    },
    handleSizeChange(val) {
      //改变每页数量
      this.listQuery.pageRow = val;
      this.handleFilter();
    },
    handleCurrentChange(val) {
      //改变页码
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleFilter() {
      //查询事件
      this.listQuery.pageNum = 1;
      this.getList();
    },
    getIndex($index) {
      //表格序号
      return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1;
    },
    onAddAdminClick() {
      this.dialogFormVisible = true;
    },
    validate(isCreate) {
      let u = this.tempUser;
      if (isCreate && u.username.trim().length === 0) {
        this.$message.warning("请填写用户名");
        return false;
      }
      if (isCreate && u.password.length === 0) {
        this.$message.warning("请填写密码");
        return false;
      }
      if (u.nickname.trim().length === 0) {
        this.$message.warning("请填写昵称");
        return false;
      }
      if (u.roleIds.length === 0) {
        this.$message.warning("请选择角色");
        return false;
      }
      return true;
    },
    onCeateAdminClick() {
      if (
        this.createAdmin.password == null ||
        this.createAdmin.password.length == 0
      ) {
        this.$message.error("密码不能为空");
        return;
      }
      if (
        this.createAdmin.password2 == null ||
        this.createAdmin.password2.length == 0
      ) {
        this.$message.error("确认密码不能为空");
        return;
      }
      if (this.createAdmin.password != this.createAdmin.password2) {
        this.$message.error("两次密码不一致");
        return;
      }
      if (this.createAdmin.password.length < 6) {
        this.$message.error("密码长度不能小于6位");
        return;
      }
      if (this.createAdmin.password.length > 8) {
        this.$message.error("密码长度不能大于8位");
        return;
      }
      //添加新用户
      this.api({
        url: "/wx/user/admin",
        method: "post",
        data: this.createAdmin,
      }).then(() => {
        this.$message.success("添加成功");
        this.getList();
        this.dialogFormVisible = false;
      });
    },
    removeUser($index) {
      let _vue = this;
      this.$confirm("确定删除该管理员?", "提示", {
        confirmButtonText: "确定",
        showCancelButton: false,
        type: "warning",
      }).then(() => {
        let user = _vue.list[$index];
        _vue
          .api({
            url: "/wx/user/" + user.id,
            method: "delete",
          })
          .then(() => {
            this.$message.success("删除成功");
            _vue.getList();
          })
          .catch(() => {
            _vue.$message.error("删除失败");
          });
      });
    },
    onEnableClick($index) {
      let user = this.list[$index];
      console.log(user.enable);
      let type;
      if (user.enable === 0) {
        type = 1;
      } else {
        type = 0;
      }
      var that = this;
      this.api({
        url: "/wx/user/" + user.id + "/enable/" + type,
        method: "put",
      })
        .then((data) => {
          that.getList();
          that.$message.success("修改成功");
        })
        .catch(() => {
          that.$message.error("操作失败");
        });
    },
    getEnableStatus(user) {
      if (user.enable == 0) {
        return "已禁用";
      } else {
        return "正常";
      }
    },
  },
};
</script>

<style scoped>
.horizonal {
  display: flex;
  flex-direction: row;
}

.copy-btn {
  width: 80px;
  height: 35px;
  font-size: 10px;
  margin-top: 2px;
  margin-left: 5px;
}

.vertical {
  display: flex;
  flex-direction: column;
}

.text-expired {
  font-size: 15px;
  font-weight: 700;
  color: red;
}
</style>
